<template>
  <view>
    <shopro-navbar>
      <view
        slot="content"
        :class="hoverInput == true ? 'inputSousuo' : 'sousuo'"
      >
        <view class="sousuo_ico"><u-icon name="search"></u-icon></view>
        <view class="sousuo_input">
          <input
            class="input"
            type="text"
            v-model="searchWord"
            :placeholder="hisWord[0]"
            confirm-type="search"
            @focus="hoverInput = true"
            @confirm="searchHandle(searchWord)"
            @blur="hoverInput = false"
            :focus="true"
          />
        </view>
        <view class="sousuo_cances" @click="searchHandle(searchWord)"
          >搜索</view
        >
      </view>
    </shopro-navbar>
    <view class="hot-search">
      <view class="top">
        <!-- <u-icon name="coupon"></u-icon> -->
        <!-- <img src="../images/hot.jpg" alt="" class="hot-pic"> -->
        <text class="text">热门搜索</text>
      </view>
      <view class="main">
        <view
          class="hot-box"
          v-for="(item, index) in hotText"
          :key="index"
          @click="searchHandle(item)"
          >{{ item }}</view
        >
      </view>
    </view>
    <view class="his-search">
      <view class="top">
        <!-- <u-icon name="clock"></u-icon> -->
        <text class="text">历史搜索</text>
        <!-- <u-icon name="coupon" class="shanchu"></u-icon> -->
        <!-- <img src="../images/qingli.jpg" alt="" class="shanchu"> -->
      </view>
      <view class="main">
        <view
          class="his-box"
          v-for="(item, index) in hisWord"
          :key="index"
          @click="searchHandle(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data: () => ({
    hotText: [],
    searchWord: '',
    hisWord: [],
    hoverInput: true,
  }),
  // 计算属性 适配者模式
  computed: {
    //   flex_left(){
    //       return `height:${this.navHeight}px;`
    //   },
    //   navbar_return(){
    //       return `top:${this.navTop}px;`
    //   }
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  created() {},
  mounted() {
    // if (uni.getStorageSync('hisWord')) {
    //   this.hisWord = uni.getStorageSync('hisWord');
    //   this.getSearchHot();
    // }
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    if (uni.getStorageSync('hisWord')) {
      this.hisWord = uni.getStorageSync('hisWord');
    }
    // this.searchWord = this.hisWord[0];
    this.getSearchHot();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    //热门搜索
    getSearchHot() {
      return new Promise((resolve, reject) => {
        this.$http('v1.getSearchHot', {}).then((res) => {
          if (res.code === 1) {
            this.hotText = res.data;
            this.hotText = this.hotText.slice(-8);
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    //将历史搜索存入本地
    setHisWord(word) {
      if (this.hisWord.indexOf(word) == -1) {
        this.hisWord.unshift(word);
        this.hisWord = this.hisWord.slice(0, 8);
        uni.setStorageSync('hisWord', this.hisWord);
      } else {
        this.hisWord.splice(this.hisWord.indexOf(word), 1);
        this.hisWord.unshift(word);
        this.hisWord = this.hisWord.slice(0, 8);
        uni.setStorageSync('hisWord', this.hisWord);
      }
    },
    //搜索
    searchHandle(word) {
      _delay(() => {
        if (word.length > 0) {
          this.setHisWord(word);
          this.$Router.push({
            path: '/pages/index/two_open_components/searchDetail',
            query: {
              searchWord: word,
            },
          });
        }
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.inputSousuo {
  display: flex;
  align-content: center;
  align-items: center;
  background-color: #eef0f5;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 30px;
  height: 60rpx;
  width: 392rpx;
  border: 2rpx solid #9084f0;
  .sousuo_ico {
    width: 10%;
    margin-left: 28rpx;
    margin-right: 10rpx;
    color: #aeaeae;
    opacity: 1;
    font-size: 24rpx;
  }
  .sousuo_input {
    flex: 1;
    height: 60rpx;
    input {
      height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      text-align: left;
    }
    // .sousuo_placeholder {
    // 	font-size: 10px;
    // 	color: #7E7E7E;
    // }
  }
  .sousuo_cances {
    width: 130rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    background-color: #9084f0;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
  }
}
.sousuo {
  display: flex;
  align-content: center;
  align-items: center;
  background-color: #eef0f5;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 30px;
  height: 60rpx;
  width: 392rpx;
  .sousuo_ico {
    width: 10%;
    margin-left: 28rpx;
    margin-right: 10rpx;
    color: #aeaeae;
    opacity: 1;
    font-size: 24rpx;
  }
  .sousuo_input {
    flex: 1;
    height: 60rpx;
    input {
      height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
      text-align: left;
    }
    // .sousuo_placeholder {
    // 	font-size: 10px;
    // 	color: #7E7E7E;
    // }
  }
  .sousuo_cances {
    width: 130rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    background-color: #9084f0;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
  }
}
// .search{
//     /deep/ .u-content{
//         position: relative;
//     }
//     /deep/ .u-action-active{
//         position: absolute;
//         width: 120rpx;
//         height: 60rpx;
//         line-height: 60rpx;
//         text-align: center;
//         color: #fff;
//         background-color: #9084F0;
//         border-radius: 30rpx;
//         right: 152rpx;
//         top: 0;
//         font-size: 24rpx;
//         font-family: PingFang SC-Medium, PingFang SC;
//         font-weight: 400;
//     }
// }
.hot-search {
  padding: 25rpx 39rpx;
  box-sizing: border-box;
  .top {
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 700;
    color: #111111;
    line-height: 34rpx;
    margin-bottom: 28rpx;
    // .hot-pic{
    //     width: 26rpx;
    //     height: 31rpx;
    //     display: inline-block;
    // }
    // .text{
    //     margin-left: 6rpx;
    // }
  }
  .main {
    display: flex;
    flex-wrap: wrap;
    .hot-box {
      background-color: #fff;
      border-radius: 26rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      padding: 12rpx 50rpx;
      display: inline-block;
      margin-bottom: 16rpx;
      margin-right: 14rpx;
      max-width: 242rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.his-search {
  padding: 46rpx 39rpx 25rpx;
  box-sizing: border-box;
  .top {
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 700;
    color: #111111;
    line-height: 34rpx;
    margin-bottom: 28rpx;
  }
  .main {
    display: flex;
    flex-wrap: wrap;
    .his-box {
      background-color: #fff;
      border-radius: 26rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      padding: 12rpx 50rpx;
      display: inline-block;
      margin-bottom: 16rpx;
      margin-right: 14rpx;
      max-width: 242rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
